<script setup>
import { onMounted, ref } from 'vue'
import {ArrowLeft} from '@element-plus/icons-vue'
import {ElMessage} from 'element-plus'
import {train,second,professionList,schoolByMajor,searchMajorData,schoolLevel,province} from '@/api/api'
import ListItem from '@/components/listItem/ListItem.vue'
import { decrypt } from '@/utils/parseDate';
import Pagination from '@/components/pagination/Pagination.vue'
import {useStore} from 'vuex'
// 获取store
const store = useStore()
const defaults = ref(true)
// 搜索的专业名称
const majorNameKeyWords = ref('')
// 专业code
const majorCode = ref('')
// 专业搜索loading
const remotLoading = ref(false)
// 搜索结果
const searchData = ref([])
// 激活的tab
const activeTab = ref('1')
// 学科门类
const subList = ref([])
// 选中的一级学科门类
const activeSub = ref('')
const activeSubCode = ref('')
// 二级门类列表
const secondList = ref([])
// 选中的二级菜单名称
const secondActive = ref('')
// 选中的二级菜单code
const secondActiveCode = ref('')
// 三级专业数据
const thirdList = ref([])
// 数据加载中
const loading = ref(false)
// 学校数据
const listData = ref([])
// 页码
const pageNum = ref(1)
// 分页大小
const pageSize = ref(10)
// 总条数
const total = ref(0)
// 模糊搜索专业
async function getRemotMajorList(val){
	try {
		if(!val)retutn
		const data = {
			majorNameKeyWords: val
		}
		remotLoading.value = true
		const res = await searchMajorData(data)
		if(res.status === 0){
			searchData.value = res.result
		}
		remotLoading.value = false
	} catch (error) {
	
	}
}
// 获取专业数据
async function getMajorList(){
	try {
		const res = await train()
		if(res.status === 0){
			if(activeTab.value == 1){
				subList.value = res.result.subjectCategoryRsps
			} else {
				subList.value = res.result.subjectCategoryRspsForZhuan
			}
			activeSub.value = subList.value[0].subjectCategoryName
			activeSubCode.value =  subList.value[0].subjectCategoryCode
			getSecond()
		}
	} catch (error) {
	}
}
// 获取二级分类
async function getSecond(){
	try {
		const data = {
			subjectCategoryCode: activeSubCode.value,
			educateType: activeTab.value
		}
		const result = await second(data)
		if(result.status === 0){
			secondList.value = result.result
			secondActive.value = result.result[0].major1Name
			secondActiveCode.value = result.result[0].major1Code
			getThird()
		}
	} catch (error) {}
}
// 获取三级分类集合
async function getThird(){
	try {
		const data = {
			educateTypes: activeTab.value,
			subjectCategoryCode: activeSubCode.value,
			major1Code: secondActiveCode.value
		}
		const result = await professionList(data)
		if(result.status === 0){
			thirdList.value = result.result.data
		}
	} catch (error) {
	
	}
}
// 切换一级分类
function changeSub(val){
	activeSub.value = val.subjectCategoryName
	activeSubCode.value = val.subjectCategoryCode
	secondList.value = []
	thirdList.value = []
	getSecond()
}
// 切换二级分类
function secondChange(val){
	thirdList.value = []
	secondActive.value = val.major1Name
	secondActiveCode.value = val.major1Code
	getThird()
}
// 切换tab
function tabChange(){
	secondList.value = []
	thirdList.value = []
	getMajorList()
}
// 搜索
function search(){
  if(!majorNameKeyWords.value){
    ElMessage.warning('请输入专业名称 !')
    return
  }
  majorCode.value = majorNameKeyWords.value
	getResult()
}
// 查看专业
function look(val){
  majorCode.value = val.majorCode
  getResult()
}
// 专业列表
async function getResult(){
	try {
		defaults.value = false
		loading.value = true
		const data = {
			majorCode: majorCode.value,
      pageNum: pageNum.value,
      pageSize: pageSize.value,
      provinceCodes: provinceCode.value,
			tag: selectTag.value === '全部'? '': selectTag.value
		}
		const res = await schoolByMajor(data)
		const result = JSON.parse(decrypt(res))
		if (result.status == 8) {
      store.commit("setTipsDialog", true);
    }
    if (result.status == 9) {
      store.commit("setNumberDialog", true);
    }
		if(result.status === 0){
			result.result.data.forEach(ele=>{
        ele.checked = false
				if(ele.schoolTag){
					ele.schoolTag = ele.schoolTag.split('|')
				}
			})
			listData.value = result.result.data
      total.value = result.result.total
		}
		loading.value = false
	} catch (error) {
	
	}
}
// 页码改变
function pageNumChange(val){
  pageNum.value = val
  getResult()
}
// 分页大小改变
function pageSizeChange(val){
  pageNum.value = 1
  pageSize.value = val
  getResult()
}
// 默认选中的学校标签
const selectTag = ref('全部')
// 点击学校类型标签
function clickTag(val) {
  if(!(selectTag.value ===val)){
    selectTag.value = val
    getResult()
  }
}
// 学校层析options
const schoolType = ref([])
// 获取学校层次options
async function getSchoolLevel() {
  try {
    const result = await schoolLevel()
    if (result.status === 0) {
      schoolType.value = JSON.parse(result.result)
    }
  } catch (error) {
    // throw new Error(error)
  }
}
// 获取所有省份
const provinceData = ref([])
// 省份code
const provinceCode = ref('')
const selectArea = ref('全部')
// 点击选项
function clickItem(val) {
  if(!(selectArea.value === val.name)){
    selectArea.value = val.name
    provinceCode.value = val.name === '全部'? '' :  val.code
    getResult()
  }
}
async function getProvince() {
  try {
    const result = await province()
    if (result.status === 0) {
      provinceData.value = result.result
    }
  } catch (error) {
  }
}
function resetSearch(){
  selectArea.value = '全部'
  selectTag.value = '全部'
  provinceCode.value = ''
  defaults.value = true
}
onMounted(()=>{
	getMajorList()
	getSchoolLevel()
	getProvince()
})
</script>
<template>
	<div class="major">
		<template v-if="defaults">
			<div class="header">
				<el-select
					v-model="majorNameKeyWords"
					clearable
					filterable
					remote
					size="large"
					reserve-keyword
					placeholder="请输入专业名称"
					:remote-method="getRemotMajorList"
					:loading="remotLoading"
				>
					<el-option
						v-for="item in searchData"
						:key="item.majorCode"
						:label="`${item.educateTypeDesc}/${item.subjectCategoryName}/${item.major1Name}/${item.majorName}(${item.majorCode})`"
						:value="item.majorCode"
					/>
				</el-select>
				<el-button type="primary" color="#ff7214" @click="search" size="large">查询</el-button>
			</div>
			<div class="cons">
				<el-tabs v-model="activeTab" class="demo-tabs" @tab-change="tabChange" type="card">
					<el-tab-pane label="学术型硕士" name="1">
						<div class="list">
							<ul class="sub">
								<li @click="changeSub(ele)" :class="activeSub===ele.subjectCategoryName? 'active': ''" v-for="ele in subList" :key="ele.subjectCategoryCode">{{ ele.subjectCategoryName }}</li>
							</ul>
							<ul class="sub secondSub">
								<li @click="secondChange(ele)" :class="secondActiveCode===ele.major1Code? 'active': ''" v-for="ele in secondList" :key="ele.major1Code">{{ ele.major1Name }}</li>
							</ul>
							<ul class="major">
								<li>
									<span class="name">专业名称</span>
									<span class="code">专业代码</span>
									<span class="btn a">开设院校</span>
								</li>
								<li v-for="ele in thirdList" :key="ele.majorCode">
									<span class="name">{{ ele.majorName }}</span>
									<span class="code">{{ ele.majorCode }}</span>
									<span class="btn" @click="look(ele)">查看</span>
								</li>
							</ul>
						</div>
					</el-tab-pane>
					<el-tab-pane label="专业学位硕士" name="2">
						<div class="list">
							<ul class="sub">
								<li @click="changeSub(ele)" :class="activeSub===ele.subjectCategoryName? 'active': ''" v-for="ele in subList" :key="ele.subjectCategoryCode">{{ ele.subjectCategoryName }}</li>
							</ul>
							<ul class="sub secondSub">
								<li @click="secondChange(ele)" :class="secondActiveCode===ele.major1Code? 'active': ''" v-for="ele in secondList" :key="ele.major1Code">{{ ele.major1Name }}</li>
							</ul>
							<ul class="major">
								<li>
									<span class="name">专业名称</span>
									<span class="code">专业代码</span>
									<span class="btn">开设院校</span>
								</li>
								<li v-for="ele in thirdList" :key="ele.majorCode">
									<span class="name">{{ ele.majorName }}</span>
									<span class="code">{{ ele.majorCode }}</span>
									<span class="btn" @click="look(ele)">查看</span>
								</li>
							</ul>
						</div>
					</el-tab-pane>
				</el-tabs>
			</div>
		</template>
		<template v-else>
			<div class="con" v-if="loading" v-loading="loading" element-loading-text="数据加载中...">
			</div>
			<div class="con" v-else>
				<el-button type="primary" color="#ff7214" style="color: #fff;" @click="resetSearch" :icon="ArrowLeft">重新查询</el-button>
				<div class="filter">
					<div class="item">
						<div class="left">
							<div class="title">院校位置</div>
							<img class="arrow" src="../../assets/images/arrow_right.png" />
						</div>
						<div class="center" :class="{ active: selectArea === '全部' }" style="font-size: 14px; cursor: pointer" @click="clickItem({ name: '全部' })">全部</div>
						<div class="pro-right">
							<div class="a-con">
								<div class="a-left">A区</div>
								<div class="a-right">
									<div class="ele" v-for="ele in provinceData.azone" :key="ele.code" :class="{ active: ele.name === selectArea }" @click="clickItem(ele)">{{ ele.name }}</div>
								</div>
							</div>
							<div class="a-con">
								<div class="a-left">B区</div>
								<div class="a-right">
									<div
										class="ele"
										:class="{ active: ele.name === selectArea }"
										v-for="ele in provinceData.bzone"
										:key="ele.code"
										@click="clickItem(ele)"
									>
										{{ ele.name }}
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="item">
						<div class="left">
							<div class="title">学校层次</div>
							<img class="arrow" src="../../assets/images/arrow_right.png" />
						</div>
						<div class="right">
							<div class="ele" :class="{active: selectTag === '全部'}" @click="clickTag('全部')">全部</div>
							<div class="ele" v-for="ele in schoolType" :key="ele" :class="{ active: ele === selectTag }" @click="clickTag(ele)">{{ ele }}</div>
						</div>
					</div>
				</div>
				<ListItem :data="listData"></ListItem>
        <Pagination @current-change="pageNumChange" @size-change="pageSizeChange" :page-num="pageNum" :page-size="pageSize" :total="total"></Pagination>
			</div>
		</template>
	</div>
</template>
<style lang="less" scoped>
.major{
	box-sizing: border-box;
  padding: 16px 0;
  height: 100%;
	width: 100%;
	overflow: auto;
	.header{
		padding: 0 calc((100% - 1200px)/2);
		min-width: 1200px;
		height: 50px;
		.el-select{
			margin-right: 10px;
			width: 400px;
		}
		.el-button{
			color:#fff;
		}
	}
	.cons{
    margin-bottom: 12px;
		padding: 0 calc((100% - 1200px)/2);
		min-width: 1200px;
		.list{
			display: flex;
			padding: 0;
			background-color: #ecf6fd;
			border: 1px solid #e5e5e5;
			.sub{
				list-style: none;
				padding: 12px 0;
				margin: 0;
				width: 180px;
				border-right: 1px solid #e5e5e5;
				li{
					position: relative;
					padding: 0 12px;
					height: 32px;
					line-height: 32px;
					font-size: 14px;
					color: #333;
					cursor: pointer;
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
				}
			}
			.secondSub{
				width: 260px;
			}
			.major{
				flex: 1;
				list-style: none;
				padding: 0;
				margin: 0;
				li{
					padding: 0 12px;
					display: flex;
					align-items: center;
					justify-content: space-between;
					height: 44px;
					line-height: 44px;
					border-bottom: 1px solid #e5e5e5;
					// border-top: 1px solid #e5e5e5;
					.name{
						flex:1;
					}
					.code{
						width: 160px;
						text-align: center;
					}
					.btn{
						width: 160px;
						text-align: center;
						cursor: pointer;
						color: #ff7214;
					}
					.a{
						color: #000;
					}
				}
				li:not(:first-child){
					background-color: #fff;
					font-size: 14px;
					color: #333;
				}
			}
			.active{
				box-sizing: border-box;
				background-color: #fff;
				border-top: 1px solid #e5e5e5;
				border-bottom: 1px solid #e5e5e5;
			}
			.active::after{
				position: absolute;
				top: 10px;
				right: 8px;
				content: '';
				width: 0;
				height: 0;
				border: 6px solid transparent;
				border-left: 6px solid #999;
			}
		}
	}
  .con{
    padding: 0 calc((100% - 1200px)/2);
		min-width: 1200px;
    height: 100%;
		.filter {
			box-sizing: border-box;
			height: 180px;
			margin-top: 12px;
			padding: 20px 20px 10px;
			margin: 0 calc((100% - 1200px)/2);
			margin-top: 10px;
			border: 1px solid rgb(238, 238, 238);
			.item {
				margin-bottom: 12px;
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: start;
				.active {
					color: #ff7214;
				}
				.left {
					display: flex;
					align-items: center;
					width: 100px;
					.arrow {
						margin-top: -1px;
						margin-left: 12px;
						width: 12px;
						height: 12px;
					}
				}
				.right {
					flex: 1;
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					.ele {
						margin-bottom: 12px;
						padding: 0 12px;
						font-size: 14px;
						cursor: pointer;
					}
					.ele:hover {
						color: #ff7214;
						cursor: pointer;
					}
				}
				.pro-right {
					margin-left: 24px;
					display: block;
					flex: 1;
					font-size: 14px;
					.a-con {
						margin-bottom: 12px;
						display: flex;
						//align-items: center;
						.a-left {
							width: 40px;
							color: #666;
						}
						.a-right {
							flex: 1;
							display: flex;
							flex-wrap: wrap;
							align-items: flex-start;
							.ele {
								margin-bottom: 12px;
								padding: 0 12px;
								font-size: 14px;
								cursor: pointer;
							}
							.ele:hover {
								color: #ff7214;
								cursor: pointer;
							}
						}
					}
				}
			}
		}
  }
}
</style>
